<template>
  <div class="h-full flex relative">
    <!-- 左侧文档区域 - 这里是滚动容器 -->
    <div class="flex-1 overflow-y-auto" ref="scrollContainer" id="document-scroll-area">
      <n-space vertical :size="16" class="p-4">
        <div id="autobiography-page"
          class="mx-auto max-w-[500px] w-full min-w-[500px] aspect-[210/297] bg-gray-50 shadow-lg rounded-md p-8 md:p-12 flex flex-col">
          
          <h1 class="text-2xl font-bold text-center mb-8">自 传</h1>

          <div class="flex-grow text-base leading-loose">
            <p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;我志愿加入中国共产党，拥护党的纲领，遵守党的章程，履行党员义务，执行党的决定，严守党的纪律，保守党的秘密，对党忠诚，积极工作，为共产主义奋斗终身，随时准备为党和人民牺牲一切，永不叛党。</p>
            <p class="text-center text-gray-400 my-8 py-4 border-y border-gray-200">
                [ 此处省略正文约3000字 ]
              </p>

          </div>

          <n-space vertical align="end" class="mt-8">
            <span class=" font-kaiti">申请人：{{ member.memberName }}</span>
              <div  id="autobiography-page" class="flex items-center">
                          <n-tooltip v-if="getValidationInfo('signatureDate')" trigger="hover">
                            <template #trigger>
                              <n-icon :size="16" :color="getLevelColor(getValidationInfo('signatureDate').level)" class="mr-1.5">
                                <component :is="getIconComponent(getValidationInfo('signatureDate').level)" />
                              </n-icon>
                            </template>
                            <span>{{ getValidationInfo('signatureDate').message }}</span>
                          </n-tooltip>
                          {{ formatDate(member.autobiography?.signatureDate,'YYYY年MM月DD日') || '（日期未填写）' }}
                        </div>
          
          </n-space>
        </div>
      </n-space>
    </div>
 <!-- 右侧固定导航区域 - 相对于当前组件定位 -->
    <div class="absolute top-4 right-4 w-64 z-10">
      <div class=" p-4 rounded-lg shadow-md">
         <n-anchor :bound="500">
          <n-anchor-link title="落款时间" href="#autobiography-page" />
        </n-anchor>
      </div>
    </div>

  </div>
</template>

<script setup>
import { ref } from 'vue';
import { NSpace, NAnchor, NAnchorLink, NAffix } from 'naive-ui';

import { formatDate } from '@/utils/dateUtils';
import { getLevelColor,getIconComponent } from '@/utils/levelUtils';
const props = defineProps({
  member: {
    type: Object,
    required: true,
    default: () => ({ massOpinion: {} })
  },
   validation: { type: Array, default: () => [] },
});
function getValidationInfo(key) {
  if (!props.validation || !Array.isArray(props.validation)) {
    return null
  }
  return props.validation.find(item => item.key === key)
}

</script>

